<script setup>
import {ref, onMounted} from 'vue'
import { Plus, Delete, Edit, Upload } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
import { del, formPost, get, post, put } from '../js/http';
import { ElMessage, ElMessageBox } from 'element-plus';

const props = defineProps({projectId:String})
const stationList = ref([])
const showStationDialog = ref(false)
const newStation = ref({})
const selectList = ref([])
const keyword = ref('')
const isAdd = ref(true)
const loading = ref(false)

const getStationByProjectId = (id) => {
    loading.value = true;
    get('/routing/station/byProjectId',{keyword: keyword.value ,projectId: id}).then(res=>{
        stationList.value = res.data
        loading.value = false;
    })
}

const addStation = () => {
    loading.value = true;
    newStation.value.projectId = props.projectId;
    post('/routing/station', newStation.value).then(res=>{
        ElMessage({type:res.status?'success':'error', message: res.message});
        if(res.status){
            getStationByProjectId(props.projectId);
            showStationDialog.value = false;
        }
        loading.value = false;
    })
}

const handleChooseFile = (e) => {
    let file = e.target.files[0];
    let formData = new FormData();
    formData.append('file', file);
    formPost('/doc/doc-file/upload',formData).then(res=>{
        if(res.status){
            let fileId = res.data.data.id;
            get('/routing/station/byFile', {fileId: fileId, projectId: props.projectId}).then(res2=>{
                ElMessage({type:res2.status?'success':'error', message: res2.message});
                if(res2.status){
                    getStationByProjectId(props.projectId);
                }
            })
        }else{
            ElMessage({type:'error', message: res.data.message});
        }
        document.getElementById('file').value = '';
    })
}

const selectFile = () => {
    document.getElementById('file').value = '';
    document.getElementById('file').click();
}

const handleSelectTable = (list) => {
    let ids = list.map(item=>item.id);
    selectList.value = ids;
}

const removeStation = (ids) => {
    ElMessageBox.confirm('确定删除该车站信息吗？','提示',{type:'warning', confirmButtonText:'确认',cancelButtonText:'取消'}).then(()=>{
        loading.value = true;
        del('/routing/station', ids).then(res=>{
            ElMessage({type:res.status?'success':'error', message: res.message});
            if(res.status){
                getStationByProjectId(props.projectId);
            }
            loading.value = false;
        })
    })
}

const updateStation = () => {
    loading.value = true;
    put('/routing/station', newStation.value).then(res=>{
        ElMessage({type:res.status?'success':'error', message: res.message});
        if(res.status){
            getStationByProjectId(props.projectId);
            showStationDialog.value = false;
            isAdd.value = true;
        }
        loading.value = false;
    })
}

const edit = (data) => {
    newStation.value = data;
    showStationDialog.value = true;
    isAdd.value = false;
}

onMounted(()=>{
    getStationByProjectId(props.projectId)
})

</script>

<template>
    <div class="stationConfig" v-loading="loading">
        <input type="file" id="file" hidden @change="handleChooseFile"/>
        <div class="toolbar">
            <el-input @input="getStationByProjectId(props.projectId)" v-model="keyword" clearable style="width: 300px;" placeholder="查询车站" :prefix-icon="Search"></el-input>
            <el-tooltip content="上传ATS配置数据表根据车站sheet页自动导入">
                <el-button style="margin-left: 10px;" type="primary" @click="selectFile" :icon="Upload">文件识别</el-button>
            </el-tooltip>
            <el-button type="primary" @click="showStationDialog=true;newStation={};isAdd=true;" :icon="Plus">增加车站</el-button>
            <el-button v-show="selectList.length > 0" type="danger" @click="removeStation(selectList)" :icon="Delete">删除选中</el-button>
        </div>
        <el-table border :data="stationList" height="600" @select="handleSelectTable">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="车站编号" prop="stationNumber"></el-table-column>
            <el-table-column label="车站名称" prop="stationName"></el-table-column>
            <el-table-column label="车站属性" prop="stationAttr"></el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scoped">
                    <el-button text :icon="Edit" @click="edit(scoped.row)">编辑</el-button>
                    <el-button text type="danger" @click="removeStation([scoped.row.id])" :icon="Delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="车站信息" v-model="showStationDialog">
            <el-form label-position="top">
                <el-form-item label="车站编号">
                    <el-input type="Number" v-model="newStation.stationNumber" placeholder="输入车站编号"></el-input>
                </el-form-item>
                <el-form-item label="车站名称">
                    <el-input v-model="newStation.stationName" placeholder="输入车站名称"></el-input>
                </el-form-item>
                <el-form-item label="车站属性">
                    <el-input v-model="newStation.stationAttr" placeholder="输入车站属性"></el-input>
                </el-form-item>
                <el-form-item>
                    <div style="width: 100%; text-align: right;">
                        <el-button style="width: 100px;" @click="showStationDialog=false">取消</el-button>
                        <el-button style="width: 100px;" v-show="isAdd" type="primary" @click="addStation">完成</el-button>
                        <el-button style="width: 100px;" v-show="!isAdd" type="primary" @click="updateStation">更新</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<style scoped>
.stationConfig{
    padding: 10px;
    height: calc(100vh - 80px);
    background-color: var(--el-color-info-light-9);
}
.toolbar{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
</style>